A Bipolar chart using CSV data

The CSV data is hidden in the page using a hidden DIV. It's then retrieved using document.getElementById() and split up using the Javascript .split() function. The resulting array is an array of STRINGS so it's converted to numbers using the Number() function.

Note: In October 2013 a new CSV reader was added to RGraph. It makes reading CSV files much easier. You can read about the new CSV reader here.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bipolar.js"></script>

Put this where you want the chart to show up:

<div id="csv-data-left" style="display: none">6,8,6,3,5,2,4</div>
<div id="csv-data-right" style="display: none">4,8,6,3,5,2,4</div>

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

This is the code that generates the chart:

<script>
        var left  = document.getElementById("csv-data-left").innerHTML.split(/,/);
        var right = document.getElementById("csv-data-right").innerHTML.split(/,/);
        
        // Since they're strings, convert them to numbers
        for (var i=0; i<left.length; ++i) {left[i] = Number(left[i]);}
        for (var i=0; i<right.length; ++i) {right[i] = Number(right[i]);}

        var bipolar = new RGraph.Bipolar({
            id: 'cvs',
            left: left,
            right: right,
            options: {
                noxaxis: true,
                axisColor: '#aaa',
                labels: ['John','Luke','Pete','Jane','Fred','Jolene','Luis']
            }
        }).draw();
</script>